﻿@{
    ViewBag.Title = "控制台";
}

@section Style{
    @Styles.Render("~/Content/Flat/Css/Home")
}


@section Script{

    @Scripts.Render("~/Content/Flat/Js/Home")

    <script>

        //owl carousel

        $(document).ready(function() {
            $("#owl-demo").owlCarousel({
                navigation: true,
                slideSpeed: 300,
                paginationSpeed: 400,
                singleItem: true,
                autoPlay: true

            });
        });

        //custom select box

        $(function() {
            $('select.styled').customSelect();
        });

    </script>

}

<!--main content start-->
<section id="main-content">
    <section class="wrapper">
        <!--state overview start-->
        <div class="row state-overview">
            <div class="col-lg-3 col-sm-6">
                <section class="panel">
                    <div class="symbol terques">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="value">
                        <h1 class="count">
                            0
                        </h1>
                        <p>新用户</p>
                    </div>
                </section>
            </div>
            <div class="col-lg-3 col-sm-6">
                <section class="panel">
                    <div class="symbol red">
                        <i class="fa fa-tags"></i>
                    </div>
                    <div class="value">
                        <h1 class=" count2">
                            0
                        </h1>
                        <p>销售额</p>
                    </div>
                </section>
            </div>
            <div class="col-lg-3 col-sm-6">
                <section class="panel">
                    <div class="symbol yellow">
                        <i class="fa fa-shopping-cart"></i>
                    </div>
                    <div class="value">
                        <h1 class=" count3">
                            0
                        </h1>
                        <p>新订单</p>
                    </div>
                </section>
            </div>
            <div class="col-lg-3 col-sm-6">
                <section class="panel">
                    <div class="symbol blue">
                        <i class="fa fa-bar-chart-o"></i>
                    </div>
                    <div class="value">
                        <h1 class=" count4">
                            0
                        </h1>
                        <p>总利润</p>
                    </div>
                </section>
            </div>
        </div>
        <!--state overview end-->

        <div class="row">
            <div class="col-lg-8">
                <!--custom chart start-->
                <div class="border-head">
                    <h3>收益图</h3>
                </div>
                <div class="custom-bar-chart">
                    <ul class="y-axis">
                        <li><span>100</span></li>
                        <li><span>80</span></li>
                        <li><span>60</span></li>
                        <li><span>40</span></li>
                        <li><span>20</span></li>
                        <li><span>0</span></li>
                    </ul>
                    <div class="bar">
                        <div class="title">一月</div>
                        <div class="value tooltips" data-original-title="80%" data-toggle="tooltip" data-placement="top">80%</div>
                    </div>
                    <div class="bar ">
                        <div class="title">二月</div>
                        <div class="value tooltips" data-original-title="50%" data-toggle="tooltip" data-placement="top">50%</div>
                    </div>
                    <div class="bar ">
                        <div class="title">三月</div>
                        <div class="value tooltips" data-original-title="40%" data-toggle="tooltip" data-placement="top">40%</div>
                    </div>
                    <div class="bar ">
                        <div class="title">四月</div>
                        <div class="value tooltips" data-original-title="55%" data-toggle="tooltip" data-placement="top">55%</div>
                    </div>
                    <div class="bar">
                        <div class="title">五月</div>
                        <div class="value tooltips" data-original-title="20%" data-toggle="tooltip" data-placement="top">20%</div>
                    </div>
                    <div class="bar ">
                        <div class="title">六月</div>
                        <div class="value tooltips" data-original-title="39%" data-toggle="tooltip" data-placement="top">39%</div>
                    </div>
                    <div class="bar">
                        <div class="title">七月</div>
                        <div class="value tooltips" data-original-title="75%" data-toggle="tooltip" data-placement="top">75%</div>
                    </div>
                    <div class="bar ">
                        <div class="title">八月</div>
                        <div class="value tooltips" data-original-title="45%" data-toggle="tooltip" data-placement="top">45%</div>
                    </div>
                    <div class="bar ">
                        <div class="title">九月</div>
                        <div class="value tooltips" data-original-title="50%" data-toggle="tooltip" data-placement="top">50%</div>
                    </div>
                    <div class="bar ">
                        <div class="title">十月</div>
                        <div class="value tooltips" data-original-title="42%" data-toggle="tooltip" data-placement="top">42%</div>
                    </div>
                    <div class="bar ">
                        <div class="title">十一月</div>
                        <div class="value tooltips" data-original-title="60%" data-toggle="tooltip" data-placement="top">60%</div>
                    </div>
                    <div class="bar ">
                        <div class="title">十二月</div>
                        <div class="value tooltips" data-original-title="90%" data-toggle="tooltip" data-placement="top">90%</div>
                    </div>
                </div>
                <!--custom chart end-->
            </div>
            <div class="col-lg-4">
                <!--new earning start-->
                <div class="panel terques-chart">
                    <div class="panel-body chart-texture">
                        <div class="chart">
                            <div class="heading">
                                <span>星期五</span>
                                <strong>$ 57,00 | 15%</strong>
                            </div>
                            <div class="sparkline" data-type="line" data-resize="true" data-height="75" data-width="90%" data-line-width="1" data-line-color="#fff" data-spot-color="#fff" data-fill-color="" data-highlight-line-color="#fff" data-spot-radius="4" data-data="[200,135,667,333,526,996,564,123,890,564,455]"></div>
                        </div>
                    </div>
                    <div class="chart-tittle">
                        <span class="title">新收益</span>
                        <span class="value">
                            <a href="#" class="active">市场</a>
                            |
                            <a href="#">查询</a>
                            |
                            <a href="#">在线</a>
                        </span>
                    </div>
                </div>
                <!--new earning end-->
                <!--total earning start-->
                <div class="panel green-chart">
                    <div class="panel-body">
                        <div class="chart">
                            <div class="heading">
                                <span>六月</span>
                                <strong>23 Days | 65%</strong>
                            </div>
                            <div id="barchart"></div>
                        </div>
                    </div>
                    <div class="chart-tittle">
                        <span class="title">总收益</span>
                        <span class="value">$, 76,54,678</span>
                    </div>
                </div>
                <!--total earning end-->
            </div>
        </div>
        <div class="row">
            <div class="col-lg-8">
                <section class="panel">
                    <div class="panel-body">
                        <div class="text-center mbot30">
                            <h3 class="timeline-title" style="color: darkgreen; font-weight: bold;">立即购买</h3>
                            <p class="t-info" style="color:teal">直接扫描二维码，付款，付款成功后加QQ联系! QQ:359484089</p>
                        </div>
                        <div class="text-center">
                            <img src="~/Content/Flat/img/qr-pay.jpg" />
                        </div>
                    </div>

                </section>
            </div>
            <div class="col-lg-4">
                <!--revenue start-->
                <section class="panel">
                    <div class="revenue-head">
                        <span>
                            <i class="fa fa-bar-chart-o"></i>
                        </span>
                        <h3>收入</h3>
                        <span class="rev-combo pull-right">
                            2013年6月
                        </span>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-6 col-sm-6 text-center">
                                <div class="easy-pie-chart">
                                    <div class="percentage" data-percent="35">
                                        <span>35</span>%
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-6">
                                <div class="chart-info chart-position">
                                    <span class="increase"></span>
                                    <span>增加收益</span>
                                </div>
                                <div class="chart-info">
                                    <span class="decrease"></span>
                                    <span>减少收益</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer revenue-foot">
                        <ul>
                            <li class="first active">
                                <a href="javascript:;">
                                    <i class="fa fa-bullseye"></i>
                                    图形
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class=" fa fa-th-large"></i>
                                    表格
                                </a>
                            </li>
                            <li class="last">
                                <a href="javascript:;">
                                    <i class=" fa fa-align-justify"></i>
                                    列表
                                </a>
                            </li>
                        </ul>
                    </div>
                </section>
                <!--revenue end-->
                <!--features carousel start-->
                <section class="panel">
                    <div class="flat-carousal">
                        <div id="owl-demo" class="owl-carousel owl-theme">
                            <div class="item">
                                <h1>JuCheap MVC后台管理系统HTML模板</h1>
                                <div class="text-center">
                                    <a href="javascript:;" class="view-all">查看</a>
                                </div>
                            </div>
                            <div class="item">
                                <h1> Bootstrap 3.0响应式布局模版</h1>
                                <div class="text-center">
                                    <a href="javascript:;" class="view-all">查看</a>
                                </div>
                            </div>
                            <div class="item">
                                <h1>Bootstrap 表格.</h1>
                                <div class="text-center">
                                    <a href="javascript:;" class="view-all">查看</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <ul class="ft-link">
                            <li class="active">
                                <a href="javascript:;">
                                    <i class="fa fa-bars"></i>
                                    销售
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class=" fa fa-calendar-o"></i>
                                    促销
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class=" fa fa-camera"></i>
                                    图片
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class=" fa fa-circle"></i>
                                    其它
                                </a>
                            </li>
                        </ul>
                    </div>
                </section>
                <!--features carousel end-->
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <!--user info table start-->
                <section class="panel">
                    <div class="panel-body">
                        <a href="#" class="task-thumb">
                            <img src="/Content/Flat/img/avatar1.jpg" alt="">
                        </a>
                        <div class="task-thumb-details">
                            <h1>
                                <a href="#">佳丽</a>
                            </h1>
                            <p>初级工程师</p>
                        </div>
                    </div>
                    <table class="table table-hover personal-task">
                        <tbody>
                            <tr>
                                <td>
                                    <i class="fa fa-tasks"></i>
                                </td>
                                <td>新任务</td>
                                <td> 02</td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="fa fa-exclamation-triangle"></i>
                                </td>
                                <td>进行中的任务</td>
                                <td> 14</td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="fa fa-envelope"></i>
                                </td>
                                <td>邮件</td>
                                <td> 45</td>
                            </tr>
                            <tr>
                                <td>
                                    <i class=" fa fa-bell-o"></i>
                                </td>
                                <td>通知</td>
                                <td> 09</td>
                            </tr>
                        </tbody>
                    </table>
                </section>
                <!--user info table end-->
            </div>
            <div class="col-lg-8">
                <!--work progress start-->
                <section class="panel">
                    <div class="panel-body progress-panel">
                        <div class="task-progress">
                            <h1>工作进度</h1>
                            <p>佳丽</p>
                        </div>
                        <div class="task-option">
                            <select class="styled">
                                <option>佳丽</option>
                                <option>汤姆</option>
                                <option>西毒</option>
                            </select>
                        </div>
                    </div>
                    <table class="table table-hover personal-task">
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>
                                    销售目标
                                </td>
                                <td>
                                    <span class="badge bg-important">75%</span>
                                </td>
                                <td>
                                    <div id="work-progress1"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>
                                    产品研发
                                </td>
                                <td>
                                    <span class="badge bg-success">43%</span>
                                </td>
                                <td>
                                    <div id="work-progress2"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>
                                    支付
                                </td>
                                <td>
                                    <span class="badge bg-info">67%</span>
                                </td>
                                <td>
                                    <div id="work-progress3"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>
                                    工作进度
                                </td>
                                <td>
                                    <span class="badge bg-warning">30%</span>
                                </td>
                                <td>
                                    <div id="work-progress4"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>
                                    任务追踪
                                </td>
                                <td>
                                    <span class="badge bg-primary">15%</span>
                                </td>
                                <td>
                                    <div id="work-progress5"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </section>
                <!--work progress end-->
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-8">
                <!--latest product info start-->
                <section class="panel post-wrap pro-box">
                    <aside>
                        <div class="post-info">
                            <span class="arrow-pro right"></span>
                            <div class="panel-body">
                                <h1>
                                    本周 <strong>流行</strong> <br> 品牌
                                </h1>
                                <div class="desk yellow">
                                    <h3>Dimond Ring</h3>
                                    <p>Dimond Ring是一家专注高端MVC程序开发的品牌</p>
                                </div>
                                <div class="post-btn">
                                    <a href="javascript:;">
                                        <i class="fa fa-chevron-circle-left"></i>
                                    </a>
                                    <a href="javascript:;">
                                        <i class="fa fa-chevron-circle-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </aside>
                    <aside class="post-highlight yellow v-align">
                        <div class="panel-body text-center">
                            <div class="pro-thumb">
                                <img src="/Content/Flat/img/ring.jpg" alt="">
                            </div>
                        </div>
                    </aside>
                </section>
                <!--latest product info end-->
                <!--twitter feedback start-->
                <section class="panel post-wrap pro-box">
                    <aside class="post-highlight terques v-align">
                        <div class="panel-body">
                            <h2>
                                JuCheap 纯MVC的HTML后台管理系统 <a href="javascript:;">JuCheap</a> 4 天前
                            </h2>
                        </div>
                    </aside>
                    <aside>
                        <div class="post-info">
                            <span class="arrow-pro left"></span>
                            <div class="panel-body">
                                <div class="text-center twite">
                                    <h1>Twitter Feed</h1>
                                </div>

                                <footer class="social-footer">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <i class="fa fa-facebook"></i>
                                            </a>
                                        </li>
                                        <li class="active">
                                            <a href="#">
                                                <i class="fa fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <i class="fa fa-google-plus"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <i class="fa fa-pinterest"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </footer>
                            </div>
                        </div>
                    </aside>
                </section>
                <!--twitter feedback end-->
            </div>
            <div class="col-lg-4">
                <div class="row">
                    <div class="col-xs-6">
                        <!--pie chart start-->
                        <section class="panel">
                            <div class="panel-body">
                                <div class="chart">
                                    <div id="pie-chart"></div>
                                </div>
                            </div>
                            <footer class="pie-foot">
                                免费: 260GB
                            </footer>
                        </section>
                        <!--pie chart start-->
                    </div>
                    <div class="col-xs-6">
                        <!--follower start-->
                        <section class="panel">
                            <div class="follower">
                                <div class="panel-body">
                                    <h4>史密斯</h4>
                                    <div class="follow-ava">
                                        <img src="/Content/Flat/img/follower-avatar.jpg" alt="">
                                    </div>
                                </div>
                            </div>

                            <footer class="follower-foot">
                                <ul>
                                    <li>
                                        <h5>2789</h5>
                                        <p>Follower</p>
                                    </li>
                                    <li>
                                        <h5>270</h5>
                                        <p>Following</p>
                                    </li>
                                </ul>
                            </footer>
                        </section>
                        <!--follower end-->
                    </div>
                </div>
                <!--weather statement start-->
                <section class="panel">
                    <div class="weather-bg">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-6">
                                    <i class="fa fa-cloud"></i>
                                    北京
                                </div>
                                <div class="col-xs-6">
                                    <div class="degree">
                                        24°
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <footer class="weather-category">
                        <ul>
                            <li class="active">
                                <h5>湿度</h5>
                                56%
                            </li>
                            <li>
                                <h5>PM</h5>
                                1.50 in
                            </li>
                            <li>
                                <h5>风向</h5>
                                10 mph
                            </li>
                        </ul>
                    </footer>

                </section>
                <!--weather statement end-->
            </div>
        </div>

    </section>
</section>
<!--main content end-->
